<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, arrowSize = 10) {
            const headlen = arrowSize;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Define geometry parameters
        const x_wire = 100;
        const b = 100;
        const a = 150;
        const y_ac = 350;

        // Calculate coordinates of the triangle vertices
        const pA = { x: x_wire + b, y: y_ac };
        const pB = { x: x_wire + b, y: y_ac - a };
        const pC = { x: pA.x + a, y: y_ac };

        // 1. Draw the long straight wire and current I₁
        ctx.beginPath();
        ctx.moveTo(x_wire, 50);
        ctx.lineTo(x_wire, 450);
        ctx.stroke();
        drawArrow(ctx, x_wire, 150, x_wire, 50, 10);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('I', 75, 100);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('1', 83, 108);

        // 2. Draw the triangular loop ABC
        ctx.beginPath();
        ctx.moveTo(pA.x, pA.y);
        ctx.lineTo(pB.x, pB.y);
        ctx.lineTo(pC.x, pC.y);
        ctx.closePath();
        ctx.stroke();

        // 3. Draw the current I₂ on the loop
        const arrowI2_y = pA.y - (pA.y - pB.y) / 2;
        drawArrow(ctx, pA.x, arrowI2_y + 10, pA.x, arrowI2_y - 10, 8);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('I', pA.x - 30, (pA.y + pB.y) / 2);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('2', pA.x - 22, (pA.y + pB.y) / 2 + 8);

        // 4. Label the vertices A, B, C
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('A', pA.x - 15, pA.y + 5);
        ctx.fillText('B', pB.x - 5, pB.y - 15);
        ctx.fillText('C', pC.x + 10, pC.y + 10);

        // 5. Draw dimension lines and labels a, b
        const dimY = 385;
        const tickHeight = 5;
        ctx.lineWidth = 1;

        // Dimension 'b'
        ctx.beginPath();
        ctx.moveTo(x_wire, dimY - tickHeight);
        ctx.lineTo(x_wire, dimY + tickHeight);
        ctx.moveTo(pA.x, dimY - tickHeight);
        ctx.lineTo(pA.x, dimY + tickHeight);
        ctx.moveTo(x_wire, dimY);
        ctx.lineTo(pA.x, dimY);
        ctx.stroke();
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('b', x_wire + b / 2, dimY + 15);
        
        // Dimension 'a'
        ctx.beginPath();
        ctx.moveTo(pA.x, dimY - tickHeight);
        ctx.lineTo(pA.x, dimY + tickHeight);
        ctx.moveTo(pC.x, dimY - tickHeight);
        ctx.lineTo(pC.x, dimY + tickHeight);
        ctx.moveTo(pA.x, dimY);
        ctx.lineTo(pC.x, dimY);
        ctx.stroke();
        ctx.fillText('a', pA.x + a / 2, dimY + 15);

        ctx.lineWidth = 1.5; // Reset line width

        // 6. Draw angle θ at vertex C
        const angleRadius = 30;
        // Vector CA points left (angle PI). Vector CB points up-left (angle 5*PI/4).
        const startAngle = Math.PI;
        const endAngle = 5 * Math.PI / 4;
        ctx.beginPath();
        ctx.arc(pC.x, pC.y, angleRadius, startAngle, endAngle);
        ctx.stroke();
        const thetaAngle = (startAngle + endAngle) / 2;
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('θ', pC.x + (angleRadius + 10) * Math.cos(thetaAngle), pC.y + (angleRadius + 10) * Math.sin(thetaAngle) - 5);

        // 7. Draw the velocity vector v
        const midBC_x = (pB.x + pC.x) / 2;
        const midBC_y = (pB.y + pC.y) / 2;
        drawArrow(ctx, midBC_x + 20, midBC_y, midBC_x + 100, midBC_y, 12);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('v', midBC_x + 60, midBC_y - 20);

        // 8. Draw the caption text
        ctx.font = '20px "SimSun", "STSong"'; // Common Chinese fonts
        ctx.fillText('习题 8-49 图', 250, 480);
    </script>
</body>
</html>